<template>
	<view :style="{width:widthV + 'rpx',height:heightV + 'rpx'}" style="position: absolute; ">
		<view v-for="(item,index) in data" :key="index" style="
		background-color: white;
		width: 300rpx;
		position: absolute;
		height: 70rpx;
		margin-bottom: 10rpx;
		" :style="{top:item.top + 'rpx'}" @touchstart="moveF(index)" @touchmove="moveT($event)" @touchend="moveE">
			<text>{{item.text}}</text>
		</view>
		<view style="width: 300rpx;height: 70rpx;background-color: rgba(0, 0, 0, 0.3);
		position: absolute;z-index: -1;" :style="{top:iME*80+'rpx'}" v-show="hide">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				heightV:'',
				widthV:'',
				data:[
					{
						text:'测试1',
						type: 'text',
						top: 0
					},
					{
						text:'测试2',
						type: 'text',
						top: 80
					}
				],
				xME:'',
				yME:'',
				iME:0,
				hide:false
			}
		},
		onLoad() {
			this.heightV = uni.getSystemInfoSync().windowHeight*2
			this.widthV = uni.getSystemInfoSync().windowWidth*2
			this.logMe("初始化完成")
		},
		methods: {
			moveT(e){
				let item = this.data[this.iME]
				console.log(e.changedTouches[0].clientY - this.yME);
				let m = e.changedTouches[0].clientY - this.yME
				item.top = m*2-35
				if((this.iME!==0)&&item.top < this.data[this.iME-1].top + 35){
					let t = this.data[this.iME-1]
					t.top = 80*this.iME
					this.data[this.iME-1] = item
					this.data[this.iME] = t
					this.iME --
				}else if((this.iME!=this.data.length-1)&&item.top > this.data[this.iME+1].top-35){
					let t = this.data[this.iME+1]
					t.top = 80*this.iME
					this.data[this.iME+1] = item
					this.data[this.iME] = t
					this.iME ++
				}else {
					this.data[this.iME] = item
				}
				
				// if(this.iME!=0){
				// 	if(item.top < this.data[this.iME-1].top-35){
				// 		if(this.data[this.iME-1].top>35){
				// 			this.data[this.iME-1].top -= 35
				// 		}else {
				// 			let t = this.data[this.iME-1]
				// 			t.top = 80*this.iME+35
				// 			this.data[this.iME-1] = item
				// 			this.data[this.iME] = t
				// 			this.iME --
				// 		}
				// 	}
				// }else {
				// 	this.data[this.iME] = item
				// }
			},
			moveF(index){
				this.logMe("开始移动")
				this.iME = index
				this.hide = true
			},
			moveE(){
				let item = this.data[this.iME]
				item.top = 80*this.iME
				this.data[this.iME] = item
				this.hide = false
			},
			logMe(message){
				console.log("-----------------------" + message + "-----------------------");
			}
		}
	}
</script>

<style>

</style>
